<template>
	<div>
		<!--更多信息弹出层-->		
	    <van-popup
		  v-model="showPopup"
		  :overlay="false"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		>		
		    <div style="position: absolute;min-height: 100%;background: #f8f8f8;width: 100%;">
				<van-nav-bar title="更多信息" style="height:44px;"> 
				  <div slot="left" style="font-size: 14px;color: #333;" @click="showPopup=false">取消</div>
				  <div slot="right" @click="confirmCategory">
				  	<span style="background: #FFD630;padding: 6px 15px;font-weight: bold;font-size: 13px;border-radius: 30px;">确认</span>
				  </div>
				</van-nav-bar>	
				
				<!--<div class="wrap">
					<div style="border-bottom: 1px solid #e5e5e5;padding: 18px 0 20px;">
						<div class="title">分类</div>
						<div class="category" @click="showCategory">
							<div >
								<span>{{categoryName}}
									<van-icon name="arrow" style="vertical-align:-1px;"/>
								</span>								
							</div>							
						</div>
					</div>
				</div>	-->
				
				<div class="wrap" style="padding-top: 18px;">
					<div >
						<div class="title" style="display: flex;justify-content: space-between;">
							<span>常用选项</span>
							<span style="font-size: 12px;color: #999;font-weight: 400;">可多选</span>
						</div>
						<div class="category">
							<span :class="{active:formatClass(item)}" v-for="item in list" @click="changeLabel(item)">{{item.labelName}}</span>
						</div>
					</div>
				</div>

				<div class="defaultWrap">
					<div class="left">
						<div class="word1" style="font-size: 14px;">仅分享可见</div>
						<div class="word2" style="margin-top: 10px;color: #999999;">仅限发布者本人可将该商品发布给指定人员</div>
					</div>
					<div class="right">
	                    <van-switch v-model="isshare" size="20px" active-color="#FFD630" inactive-color="#999"/>				
					</div>
				</div>
				
				<div class="defaultWrap" v-if="groupList.length>0">
					<div class="left active">
						<div class="word1" style="font-size: 14px;">商品群</div>
						<div class="word2" style="margin-top: 10px;color: #999999;">该商品买家可加入</div>
					</div>
					<div class="right">
						<select class="select" v-model="groupid">
						  <option value="" >请选择</option>
						  <option :value ="item.ngroupID" v-for="item in groupList">{{item.sgroupName}}</option>
						</select>		
					</div>
				</div>				
				
				<div class="cell"></div>
			</div>
			<!--<floor41 ref="floor41" @selectCategory="comfirmCategory"></floor41>-->
		</van-popup>
	</div>	
</template>

<script>
import Floor41 from '_c/market/floor/floor41.vue'	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  isshare: false,      	  
          showPopup:false,
          categoryName:'全部', // 记录选择的分类名称
          categoryId:'', // 记录选择的分类
          list:[],   // 记录常用选项列表
          activeList:[],// 记录选中的常用列表选项
          groupid:'',      
          groupList:[],
          url1:this.$api+'/marketorderservice/api/v1/market/goods/get/goodsLabel',
          url2:this.$api+'/marketuserservice/api/v1/market/getGroupByUserId',
       }
	},
	components: {
         // Floor41
	},	
	methods: {	
	  init(categoryId,categoryName,goodsLabel,isshare,groupid){
	  	// this.categoryName=categoryName?categoryName:'全部'
	  	// this.categoryId=categoryId
	  	this.isshare=isshare>0?true:false
	  	if(!groupid){
	  		this.groupid=''
	  	}else{
	  		this.groupid=groupid
	  	}
	  	// 根据字符串匹配 常用选项
	  	let arr=goodsLabel.split(',')
	  	for(var i=0;i<arr.length;i++){
	  		for(var j=0;j<this.list.length;j++){
	  			if(arr[i]==this.list[j].labelName){
	  				this.activeList.push(this.list[j])
	  			}
	  		}
	  	}  	
	  },
	  formatClass(item){
	    let obj=this.checkIndex(this.activeList,item.labelId)	
	  	return obj.status
	  },
	  checkIndex(arr,id){
	  	let obj={}
	  	obj.status=false
	  	for(var i=0;i<arr.length;i++){
	  		if(id==arr[i].labelId){
	  			obj.status=true
	  			obj.index=i
	  			break;
	  		}
	  	}
	  	return obj
	  },
	  show(){
	  	this.showPopup=true
	  },
      showCategory(){
      	this.$refs.floor41.show()
      },
      comfirmCategory(item){
        this.categoryId=item.categoryId
      	this.categoryName=item.categoryName
      },
      changeLabel(item){
      	// 判断是否存在于已选列表中，存在就取消，不存在就添加
      	let id=item.labelId
      	let obj=this.checkIndex(this.activeList,id)
      	// 取消操作
        if (obj.status){
        	let index=obj.index
        	this.activeList.splice(index,1)
        }
        // 添加操作
        else{
        	this.activeList.push(item)
        }
      },
      getData(){
      	 let that=this
	     this.$Axios2.postRequest(this.url1,{}).then(function(res){  
	     	that.list=res.data.list
	     })
	     this.$Axios2.Get(this.url2+'/'+this.userId).then(function(res){  
	     	that.groupList=that.groupList.concat(res.data.list)
	     })
      },
      // 确认选择
      confirmCategory(){
      	let str='';
      	let arrStr=[]
      	// if(!this.categoryId){str='其他'}else{str=this.categoryName}
      	for(var i=0;i<this.activeList.length;i++){
      		arrStr.push(this.activeList[i].labelName)
      	}
      	let str2=arrStr.join()      	
      	if(str2.length>0){str=str2}  
      	let isshare=this.isshare?1:0      	
        this.$emit('confirmCategory',this.categoryId,str2,str,isshare,this.groupid)
      	this.showPopup=false     	
      }
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
.wrap{padding: 20px 15px;
   .title{font-size: 15px;color: #333;font-weight: bold;}
   .category{margin-top: 15px;display: flex;flex-wrap: wrap;
     span{padding: 6px 10px;background: rgba(153,153,153,.2);border-radius: 20px;margin-right: 15px;margin-bottom: 10px;}
     span.active{background:#FFD630}
   }
}
.defaultWrap{display: flex;padding: 10px 15px;align-items: center;}
.defaultWrap .left{width: 80%;}
.defaultWrap .left.active{width:50%;}
.defaultWrap .right{flex: 1;display: flex;justify-content: flex-end;
   .select{width: 100%;border:1px solid #e5e5e5;padding: 6px 9px;font-size: 12px; color: #333;}
}
</style>